﻿<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@page isELIgnored="false"%>
<c:set var="rootpath" value="${pageContext.request.contextPath}"></c:set>
<html>

<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<title></title>

<!-- 网站logo -->
<link rel="shortcut icon" href="${rootpath }/img/logo/g1181_16X16.ico"
	type="image/x-icon">
<link rel="icon" href="${rootpath }/img/logo/g1181_16X16.ico"
	type="image/x-icon">
<link rel="stylesheet" type="text/css" href="${rootpath }/css/blog.css" />
<link rel="stylesheet" type="text/css"
	href="${rootpath }/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${rootpath }/css/bootstrapValidator.min.css" />
<link rel="stylesheet" type="text/css" href="${rootpath }/css/blog.css" />
<script src="${rootpath }/js/jquery-3.0.0.min.js" type="text/javascript"
	charset="utf-8"></script>
<script src="${rootpath }/js/bootstrap.min.js" type="text/javascript"
	charset="utf-8"></script>
<script src="${rootpath }/js/bootstrapValidator.min.js"
	type="text/javascript" charset="utf-8"></script>

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="${rootpath }/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script
	src="${rootpath }/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="${rootpath }/js/html5shiv.js"></script>
      <script src="${rootpath }/js/respond.min.js"></script>
    <![endif]-->
<script src="${rootpath }/js/ie10-viewport-bug-workaround.js"></script>

</head>

<body>

	<div class="container">
		<div class="row">
			<div class="col-sm-8 blog-main">
				<div class="blog-post">
					<div class="blog-post-title">
						<a class="m-title">${essay.title }</a> <input type="hidden"
							value="${essay.id}" id="essay_id" />
					</div>
					<fmt:formatDate value="${essay.time}" pattern="yyyy-MM-dd HH:mm"/>
					<hr />
					<div>${essay.content }</div>
					<div>
						<a class="m-info" href="#">评论：${essay.comment }</a>
						<%-- <span
							class="sep">·</span> <a class="m-info" href="#">热度：${essay.reading }</a> --%>
					</div>
				</div>
				<nav>
					<ul class="pager">
					<c:if test="${!empty previous}">
					<li class="previous"><a href="comment?id=${previous }">&larr; 上一篇</a></li>
					</c:if>
					<c:if test="${!empty next}">
					<li class="next"><a href="comment?id=${next }">下一篇 &rarr;</a></li>
					</c:if>
					</ul>
				</nav>
				<hr />
				<p class="m-info">评论(${essay.comment })</p>
				<ul class="media-list" id="m-comment"></ul>
				<hr />
				<div class="m-info">
					<label id="addcomment">添加评论</label> <a hidden="hidden"
						style="float: right;" id="cancelreply" onclick="cancelreply(this)"
						href="javascript:void(0);">取消回复</a>
				</div>

				<form action="add_comment?essayId=${essay.id}" method="post"
					id="comment">

					<div class="row" id="comment-table">
						<div class="col-sm-8">
							<div>
								<textarea class="form-control" rows="6" name="textarea"
									placeholder="想说些什么?"></textarea>

								<input type="hidden" value="" name="replyId" />
							</div>
						</div>
						<div class="col-sm-4">
							<div class="input-group" style="margin-bottom: 13px;">
								<label class="input-group-addon">呢称</label> <input type="text"
									class="form-control" name="username" />
							</div>
							<div class="input-group" style="margin-bottom: 13px;">
								<label class="input-group-addon">邮箱</label> <input type="email"
									class="form-control" name="email" />
							</div>
							<input type="submit" class="m-submit form-control" value="提交评论" />
						</div>
					</div>
				</form>

			</div>
		</div>

	</div>

	<script type="text/javascript" charset="utf-8">
		function reply(e) {
			mScroll("comment");
			var name = $(e).parent().prev().children(".media-heading").text();
			$("#addcomment").html("回复 " + name);
			$("#cancelreply").show();

			$("#comment").attr(
					"action",
					"reply_comment?essayId=" + $("#essay_id").val()
							+ "&replyId="
							+ $(e).parent().parent().attr("id").substring(11));
		}

		function cancelreply(e) {
			$("#addcomment").html("添加评论");
			$("#cancelreply").hide();
			$("#comment").attr("action",
					"add_comment?essayId=" + $("#essay_id").val());
		}

		function mScroll(id) {
			$("html,body").stop(true);
			$("html,body").animate({
				scrollTop : $("#" + id).offset().top
			}, 1000);
		}

		$(document)
				.ready(
						function() {
							$("#comment").bootstrapValidator({
								live : "disabled",
								fields : {
									textarea : {
										validators : {
											notEmpty : {
												message : '评论不能为空'
											}
										}
									},
									username : {
										validators : {
											notEmpty : {
												message : '呢称不能为空'
											},
											stringLength : {
												min : 1,
												max : 30,
												message : "名称长度必须为1-30个字符之间"
											}
										}
									},
									email : {
										validators : {
											emailAddress : {
												message : "请输入有效的邮箱地址"
											}
										}
									}
								}
							});

							$
									.ajax({
										url : "comment_data?id="
												+ $("#essay_id").val(),
										type : "post",
										success : function(data) {

											var location_url = window.location.href;
											var src_path = location_url
													.substring(0, 27);
											for (var i = 0; i < data.length; i++) {
												if (data[i].reply_id == 0) {
													setFristLayer(src_path,
															data[i]);
												} else {
													setSecondLayer(src_path,
															data[i]);
												}
											}
										}
									});

							function setFristLayer(path, comment) {
								var htmlstr = '<li class="media" id="comment_id_'+comment.id+'"><a class="media-left" > <img src="${rootpath }/img/face/'+comment.head+'" height="50" width="50"> </a> <div class="media-body" style="width: 1000px;"> <h4 class="media-heading">'
										+ comment.username
										+ '</h4> <a class="m-info">'
										+ comment.time.substring(0,16)
										+ '</a> <p>'
										+ comment.review
										+ '</p> </div> <div class="media-left"> <a href="javascript:void(0);" onclick="reply(this)" style="display: block; width: 40px;">回复</a> </div></li>';
								$("#m-comment").append(htmlstr);
							}

							function setSecondLayer(path, comment) {
								var htmlstr = '<li class="media" style="margin-left: 50px;" id="comment_id_'+comment.id+'"><a class="media-left" > <img src="${rootpath }/img/face/'+comment.head+'" height="50" width="50"> </a> <div class="media-body" style="width: 1000px;"> <h4 class="media-heading">'
										+ comment.username
										+ '</h4> <a class="m-info">'
										+ comment.time.substring(0,16)
										+ '</a> <p>'
										+ comment.review
										+ '</p> </div> <div class="media-left"> <a href="javascript:void(0);" onclick="reply(this)" style="display: block; width: 40px;">回复</a> </div></li>';
								$("#comment_id_" + comment.reply_id).after(
										htmlstr);
							}
						});
	</script>

</body>

</html>